<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="阅读并确认法律责任义务" name="first">
        <template #label>
          <div class="tabs-title">
            <svg-icon v-if="activeName==='first'" icon="prefixIcon" class="prefix-icon"></svg-icon> 
            <svg-icon v-else icon="prefixIcon2" class="prefix-icon"></svg-icon> 
            <span class="tabs-name" :class="{active: activeName === 'first'}">阅读并确认法律责任义务</span>
          </div>
        </template>
        <div class="control-container">
          阅读并确认法律责任义务
        </div>
      </el-tab-pane>
      <el-tab-pane label="阅读评估要点及红线要求" name="second">
        <template #label>
          <div class="tabs-title">
            <svg-icon v-if="activeName==='second'" icon="prefixIcon" class="prefix-icon"></svg-icon> 
            <svg-icon v-else icon="prefixIcon2" class="prefix-icon"></svg-icon> 
            <span class="tabs-name" :class="{active: activeName === 'second'}">阅读评估要点及红线要求</span>
          </div>
        </template>
        <div class="control-container">
          阅读评估要点及红线要求
        </div>
      </el-tab-pane>
      <el-tab-pane label="确认签署真实性声明" name="third">
        <template #label>
          <div class="tabs-title">
            <svg-icon v-if="activeName==='third'" icon="prefixIcon" class="prefix-icon"></svg-icon> 
            <svg-icon v-else icon="prefixIcon2" class="prefix-icon"></svg-icon>
            <span class="tabs-name" :class="{active: activeName === 'third'}">确认签署真实性声明</span>
          </div>
        </template>
        <div class="control-container">
          确认签署真实性声明
        </div>
      </el-tab-pane>
    </el-tabs>
      <div class="btn">
        <t-space :size="8">
          <t-button  theme="default" variant="base" @click="clickPrev" >上一步</t-button>
          <t-button v-if="(activeName=== 'first' && aOne === 1)  ||
                          (activeName=== 'second' && aTwo === 1) ||
                          (activeName=== 'third' && aThree === 1)"  disabled class="t-is-disabled">已签署</t-button>
          <t-button v-else @click="confirmSign">确定</t-button>
        </t-space>
    </div>
  </div>
</template>
<script setup>
import { getAssessSign,getAssessDetail } from '@/api/sjhg/assess';
import { MessagePlugin } from 'tdesign-vue-next';
const props = defineProps({
  assessId: {
    type: String,
    default: ''
  },
  agreentmentOne:{
    type: Number,
    default: 0
  },
  agreentmentTwo:{
    type: Number,
    default: 0
  },
  agreentmentThree:{
    type: Number,
    default: 0
  }
})

const aOne = ref(props.agreentmentOne)
const aTwo = ref(props.agreentmentTwo)
const aThree = ref(props.agreentmentThree)

// onMounted(() => {
//   if(props.assessId){
//     console.log('---second onMounted-----')
//     getDetail();
//   }
// })

const activeName = ref('first')
const handleClick = (tab, event) =>{
  console.log(tab, event);
}

const emit = defineEmits(["goFirst","goThird"]);
//上一步
const clickPrev = () => {
  if(activeName.value === 'first'){
    emit('goFirst')
  }else if(activeName.value === 'second'){
    activeName.value = 'first'
  }else if(activeName.value === 'third'){
     activeName.value = 'second'
  }
}
//确认签署
const confirmSign = () =>{
  if(activeName.value === 'first'){
    getSign(0)
  }else if(activeName.value === 'second'){
    getSign(1)
  }else if(activeName.value === 'third'){
    getSign(2)
  }
}

//-------------------------------接口-------------------------------------------
  //评估内容提交成功后 
//签署协议 	协议一 -0 协议二 -1 协议三 -2
const getSign = (type) => {
    let params = {}
    params.assessId  = props.assessId
    params.type  = type
    getAssessSign(params)
      .then((res) => {
        if (res.code == 200) {
          if(activeName.value === 'first'){
            MessagePlugin.success('法律责任义务签署成功~')
            activeName.value = 'second'
          }else if(activeName.value === 'second'){
            MessagePlugin.success('评估要点及红线要求签署成功~')
            activeName.value = 'third'
          }else if(activeName.value === 'third'){
            MessagePlugin.success('真实性声明签署成功~')
          }
           //成功签署  更新详情数据（签署数据）
          getDetail();
        } 
      }).finally(() => {
      });
  }

  //项目详情
const assessDetail = ref(null)
const getDetail = () => {
    let params = {}
    params.assessId  = props.assessId
    getAssessDetail(params)
      .then((res) => {
        if (res.code == 200) {
          assessDetail.value = res.data
          aOne.value = res.data.agreentmentOne
          aTwo.value = res.data.agreentmentTwo
          aThree.value = res.data.agreentmentThree
          if(aOne.value === 1 && aTwo.value === 1 && aThree.value === 1){
            emit('goThird')
          }
        } 
      })
      .finally(() => {
      });
  }
</script>
<style lang="scss" scoped>
.t-is-disabled {
    background: #B5C7FF !important;
    border-color: #B5C7FF !important;
}
.control-container{
  width: 100%;
  height: calc(100vh - 350px);
  font-size: 14px;
  line-height: 20px;
  color: #565960;
}
.tabs-title{
  display: flex;
  align-items: center;
}
.prefix-icon{
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.btn{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-tabs__item {
  font-size: 14px ;
  color:rgba(0, 0, 0, 0.6);
  padding: 0 8px;
}

.tabs-name{
  color: rgba(0, 0, 0, 0.6) ;
  font-size:14px ;
}

.active{
  color: rgba(0, 82, 217, 1) ;
  font-size:14px ;
}
</style>
